<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <!-- Import style -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <link rel="stylesheet" href="./static/element-plus/theme-chalk/display.css"/>
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
  </head>
  <body>
    <div id="app">
      <el-container>
       <el-header>
        <el-row>
          <el-col :span="4" style="display: flex;flex-direction:row;align-items:center">
          <img src="./static/images/logo.png"  style="height: 60px;">
          <h2 style="padding-left: 8px;">技术社区</h2>
          </el-col>
      <el-col :span="8">
          <el-menu :default-active="activeIndex" 
          mode="horizontal" 
          style="border-bottom: none  !important"
          :ellipsis="false">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">文章</el-menu-item>
          <el-menu-item index="3">课程</el-menu-item>
          <el-menu-item index="4">商城</el-menu-item>
          </el-menu>
      </el-col>
      <el-col :span="8" style="height: 60px; line-height:60px" class="hidden-xs-only">
        <el-input/>
      </el-col>
      <el-col :span="4" style="line-height: 60px;" class="hidden-xs-only">

        <div v-if="!isLoggedIn">
          <el-link type="primary" @click="isLoggedIn=!isLoggedIn">登录</el-link>
          <el-link type="primary" style="padding: 8px;" @click="goToRegister()">注册</el-link>
        </div>
        <div v-else>
          <el-link @click="goToProfile">
            <img src="./static/images/avatar.png" style="height: 30px; vertical-align: middle; margin-right: 5px;">{{username}}
          </el-link>
        </div>
      </el-col>
    </el-row>
 </el-header>
<el-main>
  <el-carousel height="420px" motion-blur>
  <el-carousel-item><img src="./static/images/carousel1.png" style="width: 100%;"></el-carousel-item>
  <el-carousel-item><img src="./static/images/carousel2.png" style="width: 100%;"></el-carousel-item>
  <el-carousel-item><img src="./static/images/carousel3.png" style="width: 100%;"></el-carousel-item>
  </el-carousel>
    <el-row>
      <el-col :span="8" class="hidden-xs-only">
        <div class="section">
          <h3>热门文章</h3>
          <el-link type="info" style="float: right;" @click="showAllArticles = true">查看更多</el-link>
          <ul>
            <li v-for="(article, index) in (showAllArticles? hotArticles : hotArticles.slice(0, 3))" :key="index">
              <p>{{article.title}}</p>
              <p style="color: green; margin-left: 10px;">{{article.date}}</p>
            </li>
          </ul>
          <el-button v-if="showAllArticles" type="text" @click="showAllArticles = false">关闭</el-button>
        </div>
      </el-col>
  
      <el-col :span="8" class="hidden-xs-only">
        <div class="section">
          <h3>热门课程</h3>
          <el-link type="info" style="float: right;" @click="showAllCourses = true">查看更多</el-link>
          <ul>
            <li v-for="(course, index) in (showAllCourses? hotCourses : hotCourses.slice(0, 3))" :key="index">
              <p>{{course.title}}</p>
              <p style="color: red; margin-left: 10px;">￥{{course.price}}</p>
            </li>
          </ul>
          <el-button v-if="showAllCourses" type="text" @click="showAllCourses = false">关闭</el-button>
        </div>
      </el-col>
  
      <el-col :span="8" class="hidden-xs-only">
        <div class="section">
          <h3>热门商品</h3>
          <el-link type="info" style="float: right;" @click="showAllProducts = true">查看更多</el-link>
          <el-carousel 
            :interval="3000" 
            arrow="always"
            height="300px"
            v-model:active-index="productCarouselIndex"
          >
            <el-carousel-item v-for="(product, index) in (showAllProducts ? hotProducts : hotProducts.slice(0, 3))" :key="index">
              <img :src="product.image" style="width: 100%; height: 100%; object-fit: contain;">
              <div class="el-carousel__caption" slot="caption">
                <p>{{ product.name }}</p>
              </div>
            </el-carousel-item>
          </el-carousel>
          <el-button v-if="showAllProducts" type="text" @click="showAllProducts = false">关闭</el-button>
        </div>
      </el-col>
    </el-row>
  </el-main>
  <el-footer>
    <el-row>
        <el-col :lg="8" :xs="24" style="display: flex;flex-direction:row;align-items:center;">
            <div><img src="./static/images/logo.png" style="width: 100px;"></div>
            <div style="padding-left: 8px;">
                <h2>技术社区</h2>
                <p>致力于构建一个专业的IT技术交流社区</p>
            </div>
        </el-col>
        <el-col :lg="8" :xs="24">
            <div>
                <el-link type="primary">首页</el-link>
                <el-link type="primary">文章</el-link>
                <el-link type="primary">课程</el-link>
                <el-link type="primary">商城</el-link>
            </div>
            <div>
                <el-link type="primary">关于我们</el-link>
                <el-link type="primary">使用手册</el-link>
                <el-link type="primary">隐私条款</el-link>
                <el-link type="primary">建议反馈</el-link>
            </div>
        </el-col>
        <el-col :lg="8" :xs="24">
            <h2>联系我们</h2>
            <p>电话：1111111</p>
            <p>邮箱：111@dev.com</p>
        </el-col>
    </el-row>
    <div style="background-color: #a0cfff;text-align:center;height: 60px;line-height: 60px;">软件开发工作室版权所有</div>
</el-footer>
      </el-container>
    </div>
  </body>
  <script>
    var App = {
        data() {
            return {
                name: "hello vue",
                activeIndex: "1",
                isLoggedIn: false,
                username: "admin",
                carouselImages: [
                    './static/images/carousel1.png',
                    './static/images/carousel2.png',
                    './static/images/carousel3.png'
                ],
                hotArticles: [
                    { title: 'Vue 3新特性深度解析', date: '2024-11-01' },
                    { title: 'JavaScript 高级编程技巧', date: '2024-10-25' },
                    { title: 'React性能优化秘籍', date: '2024-10-20' },
                    { title: 'Node.js实战应用案例', date: '2024-10-15' }
                ],
                hotCourses: [
                    { title: 'Vue实战项目开发', price: 99 },
                    { title: '全栈开发入门教程', price: 199 },
                    { title: '数据结构与算法精讲', price: 149 },
                    { title: '人工智能基础课程', price: 249 }
                ],
                hotProducts: [
                    { image: './static/images/product01.png', name: '商品1' },
                    { image: './static/images/product02.png', name: '商品2' },
                    { image: './static/images/product03.png', name: '商品3' },
                    { image: './static/images/product04.png', name: '商品4' }
                ],
                showAllArticles: false,
                showAllCourses: false,
                showAllProducts: false
            };
        },
        methods: {
            goToLogin() {
                console.log('前往登录');
            },
            goToRegister() {
                window.location.href ='register.html';
            },
            goToProfile() {
                window.location.href = 'profile.html';
            }
        }
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");
  </script>
</html>